<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <div id="app">
        <h2>{{message+name}}</h2>
        <h2 v-if="state">show</h2>
        <input v-model="name" type="text" />
        <button v-on:click="hidden">hidden</button>
        <button @click="show">show</button>
        <ol>
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
    </div>

    <div>{{message}}</div>

    <script src="js/vue.js"></script>
    <script>
        Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        })
        // 编程范式: 声明式编程
        const app = new Vue({
            el: '#app', // 用于挂载要管理的元素
            data: { // 定义数据
                message: 'Hellow World!',
                state: true,
                name: '',
                groceryList: [
                    { id: 0, text: '蔬菜' },
                    { id: 1, text: '奶酪' },
                    { id: 2, text: '随便其它什么人吃的东西' }
                ]
            },
            created: function () {
                // `this` 指向 vm 实例
                console.log('a is: ' + this.a)
            },
            methods: {
                hidden() {
                    this.state = false;
                },
                show() {
                    this.state = true;
                }
            },
        })
    </script>

</body>

</html>